<template>
  <el-drawer
    title="证书"
    size="450px"
    :close-on-click-modal="false"
    v-if="dialogVisible"
    direction="rtl"
    @close="handleCloseDialog"
    :visible="dialogVisible"
  >
    <el-form
      label-position="right"
      :model="ruleForm"
      class="info-form"
      label-width="150px"
      :inline="true"
      :rules="rules"
      ref="ruleForm"
      :disabled="disable"
    >
      <el-row :gutter="24">
        <el-form-item label="姓名" prop="user_ids">
          <el-select
            v-model="ruleForm.user_ids"
            filterable
            clearable
            :multiple="mode == 'add'"
          >
            <el-option
              v-for="handler in staffData"
              :key="handler.id"
              :label="handler.name"
              :value="handler.id * 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="岗位" prop="job">
          <el-input v-model="ruleForm.job"></el-input>
        </el-form-item>

        <el-form-item label="培训时间" prop="training_time">
          <el-date-picker
            v-model="ruleForm.training_time"
            type="datetime"
            placeholder="选择日期时间"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="签发时间" prop="issue_time">
          <el-date-picker
            v-model="ruleForm.issue_time"
            type="datetime"
            placeholder="选择日期时间"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
      </el-row>
      <el-row :gutter="24">
        <el-form-item label="培训课题" prop="training_topic">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 8 }"
            v-model="ruleForm.training_topic"
          ></el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <div class="dialog-footer" style="text-align: center; padding-top: 20px">
      <el-button size="small" @click="handleCloseDialog">关闭</el-button>
      <el-button
        size="small"
        v-show="mode === 'add' || mode === 'edit'"
        type="primary"
        @click="handleClickSubmit"
        >保存</el-button
      >
      <template v-if="mode !== 'add'">
        <el-button size="small" type="primary" @click="handleOperation('1')"
          >下载证书</el-button
        >
      </template>
    </div>
  </el-drawer>
</template>

<script>
import {
  certificateCreate,
  certificateUpdate,
  certificateDetail,
  certificateDownload,
} from "@/api/qms";
import { AdminBox } from "@/api/customer";
import { timestamp10 } from "@/utils/mUtils";
export default {
  name: "certificateEdit",
  components: {},
  props: ["dialogVisible", "mode", "id"],
  data() {
    return {
      ruleForm: {
        user_ids: [],
        job: "",
        training_topic: "",
        training_time: "",
        issue_time: "",
      },
      titleTip: "证书",

      staffData: [],

      rules: {
        user_ids: [
          { required: true, message: "请选择培训人", trigger: "blur" },
        ],
        job: [{ required: true, message: "请输入职位", trigger: "blur" }],
        training_time: [
          { required: true, message: "请选择培训时间", trigger: "change" },
        ],
        issue_time: [
          { required: true, message: "请选择签发时间", trigger: "change" },
        ],
        training_topic: [
          { required: true, message: "请输入培训课题", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    disable() {
      return this.mode === "detail";
    },
  },
  mounted() {
    AdminBox({
      user_type: "0",
    }).then((res) => {
      this.staffData = res.data;
    });

    if (this.mode === "add") {
    } else if (this.mode === "detail" || this.mode === "edit") {
      this.getDetail();
    }
  },
  methods: {
    handleCloseDialog() {
      this.$emit("close");
    },

    handleOperation(type) {
      switch (type) {
        case "1":
          certificateDownload({
            id: this.id * 1,
          }).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "下载证书成功",
                type: "success",
              });
              let filePath = res.data.data;
              filePath = filePath.replace("http:", "https:");
              window.open(filePath);
            }
          });
          break;

        default:
          break;
      }
    },
    // 获取文件详情
    getDetail() {
      certificateDetail({
        id: this.id * 1,
      }).then((res) => {
        const data = res.data.data;
        data.user_ids = data.user_id;
        data.training_time = data.training_time * 1000;
        data.issue_time = data.issue_time * 1000;
        this.ruleForm = data;
      });
    },
    handleClickSubmit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        const _ruleForm = {
          ...this.ruleForm,

          training_time: timestamp10(this.ruleForm.training_time) * 1,
          issue_time: timestamp10(this.ruleForm.issue_time) * 1,
        };
        if (this.mode === "add") {
          certificateCreate(_ruleForm).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.$emit("close", true);
            }
          });
        } else {
          _ruleForm.user_id = _ruleForm.user_ids;
          certificateUpdate(_ruleForm).then((res) => {
            if (res.code === 10000) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.$emit("close", true);
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  .info-form {
    .el-input {
      width: 220px;
    }

    .el-select,
    .el-cascader,
    .el-radio-group {
      width: 220px;
    }

    .el-textarea {
      width: 220px;
    }

    /deep/ .el-form-item {
      margin-right: 30px !important;
    }
  }
}
</style>